<template>
    <div class="live" id="index">
        <el-row class="top-scorll">
            <el-col :span="16" :offset="4">
                <div class="top-text">
                    <template v-if="topType == '文字'">{{topText}}</template>
                    <template v-else><img :src="UPLOAD_URL + topText" alt=""></template>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="16" :offset="4">
                <el-row>
                    <div class="live-box-contain">
                        <a class="corner" href="http://liveroom.sczzyf.com"><img src="../assets/corner.png" alt=""></a>
                        <video-player id="live" class="video-player-box vjs-custom-skin" :options="playerOptions" :playsinline="true" ref="videoPlayer"></video-player>
                    </div>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <router-link to="/ProVideo"><div class="priod-title">往期视频回顾>></div></router-link>
                    </el-col>
                   <!--  <el-col :span="24">
                        <el-row :gutter="10" type="flex">
                            <el-col v-for="(video, index) in videoData" :key="index">
                                <a class="priod-videos" :href="video.url" target="_blank" :title="video.title">
                                	<div class="thumb">
                                        <img :src="UPLOAD_URL + video.imgUrl" alt="">
                                    </div>
                                    <div class="priod-text">
                                        <div class="video-title">{{video.title}}</div>
                                    	<div class="video-time">{{formatTime(video.addTime)}}</div>
                                    </div>
                                </a>
                            </el-col>
                        </el-row>
                    </el-col>
                    <el-col :span="24" class="more-proid">
                        <router-link to="/ProVideo" class="more-proid-btn"> 查看更多>>></router-link>
                    </el-col> -->
                </el-row>
            </el-col>
        </el-row>
        <el-row class="business">
            <el-col :span="16" :offset="4">
                <div class="slogn">用最权威的服务为您改变投资命运</div>
                <div class="little-sg">业务领域涉及资产管理、市值管理、IPO咨询、证券投资资讯、资本市场互动传播等。
                    <br>秉承着“专业、创新、勤勉、合规”的宗旨，坚信没有合规，就没有未来的经营理念，生生不息。</div>
            </el-col>
        </el-row>
        <el-row class="index-item">
            <el-col :span="16" :offset="4">
                <el-row>
                    <el-col :span="12" class="index-cell tal">
                        <div class="index-item-title">产品介绍</div>
                        <div class="index-item-content">{{productIntro}}</div>
                    </el-col>
                    <el-col :span="12" class="index-cell">
                        <img src="../assets/p-1.jpg" alt="" class="p-shadow">
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
        <el-row class="index-item">
            <el-col :span="16" :offset="4">
                <el-row class="index-item-title">客户绩效</el-row>
                <el-row class="table-wrap">
                    <el-scrollbar class="live-scrollbar">
                        <ul class="performance-ul" v-if="tableData.length">
                            <li v-for="(item, index) in tableData" :key="index" :class="['ul-flex',index < 5 ? 'new-per' : '']" @click="showBigImage(item.imageUrl)">
                                <span class="li-flex-1">{{item.name}}</span>
                                <span class="li-flex-1">{{formatTime(item.time)}}</span>
                                <span class="li-flex-1">盈利{{item.number}}万</span>
                            </li>
                        </ul>
                        <ul class="performance-ul" v-else>
                            <li class="no-data">暂无数据</li>
                        </ul>
                    </el-scrollbar>
                </el-row>
            </el-col>
        </el-row>
        <el-dialog :visible.sync="showImage" width="600px" @close="closeDialog" class="dialog" top="100px">
            <img :src="bigImageUrl" alt="" class="big-img">
        </el-dialog>
    </div>
</template>
<script>
import { getPeriodVideo, getPerformance, getConfig } from '@/api/api'
import videojs from 'video.js'
window.videojs = videojs
require('videojs-flash/dist/videojs-flash')
require('videojs-contrib-hls/dist/videojs-contrib-hls')
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { videoPlayer } from 'vue-video-player'
export default {
    data() {
        return {
            tableData: [],
            videoData: [],
            playerOptions: {
                height: '100%',
                overNative: false,
                sourceOrder: true,
                autoplay: true, //自动播放
                techOrder: ['html5', 'flash'], // 兼容顺序
                sources: null,
                loop: true,
                controlBar: { //控制栏
                    timeDivider: false, // 时间分割线
                    remainingTimeDisplay: false, //显示剩余时间
                    progressControl: false, //进度条
                    durationDisplay: false //总时间
                },
                flash: {
                    hls: { withCredentials: false },
                    swf: '/static/media/VideoJS.swf' //使用自己的flash播放器
                },
                html5: { hls: { withCredentials: false } },
                poster: "/static/poster.jpg", //默认封面
            },
            messageLists: [],
            productIntro: '',
            showImage: false,
            bigImageUrl: '',
            topType: '文字',
            topText: ''
        }
    },
    components: {
        videoPlayer
    },
    created: function() {
        var loginTime = localStorage.getItem('loginTime') || 0;
        var now = new Date().getTime()
        if (now - loginTime > 604800000) {
            localStorage.removeItem('user')
        }
        var userObj = localStorage.getItem('user') || '{}';
        var user = JSON.parse(userObj);
        if (user.token && user.user.username) {
            this.logined = true;
            this.loginedUser = user.user.username;
        }
        getConfig('videosUrl,productIntro,top').then(res => {
            this.productIntro = res.productIntro;
            this.playerOptions.sources = [{
                type: "video/mp4",
                src: res.videosUrl //http://video.sczzyf.com/home_intro.mp4
            }]
            try{
                var topObj = JSON.parse(res.top);
                this.topType = topObj.topType;
                this.topText = topObj.value;

            } catch (e){
                this.topType = '文字';
                this.topText = '';
            }
        })
        getPeriodVideo({ params: { pageSize: 4 } }).then(res => {
            this.videoData = res.list;
        })
        getPerformance({ params: { pageSize: 10 } }).then(res => {
            this.tableData = res.list;
        })
    },
    methods: {
        formatTime: function(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : (date.getMonth() + 1);
            var day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
            var mins = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
            var sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
            return year + '-' + month + '-' + day + ' ' + hours + ':' + mins + ':' + sec;
        },
        formatCourseOfDays: function(courseItem) {
            if (!courseItem) {
                return '-';
            }
            return courseItem.content;
        },
        showBigImage: function(url){
			this.bigImageUrl = this.UPLOAD_URL + url;
            this.showImage = true;
		},
		closeDialog: function(){
			this.showImage = false;
            this.bigImageUrl = '';
		}
    },
    beforeDestroy: function() {
        this.$refs.videoPlayer.dispose();
    }
}

</script>
<style scoped>
.live {
    margin-top: 40px;
    min-height: 800px;
}

.live-box-contain {
    height: 480px;
    background-color: #000;
    position: relative;
}
.corner{
    position: absolute;
    right: -12px;
    bottom: -15px;
    z-index: 9;
}
.box-card {
    height: 380px;
}

.live-scrollbar {
    height: 100%;
}

.seamless-warp {
    height: 100%;
    overflow: hidden;
}

.history-video-title,
.video-class {
    height: 50px;
    line-height: 50px;
    background-color: #e2881b;
    color: #fff;
    text-align: center;
}

.video-class {
    cursor: pointer;
}

.history-video-item {
    padding: 10px 20px;
}

.history-video-item:not(:last-child) {
    border-bottom: 1px solid #ccc;
}

.history-video-time,
.history-video-item-title {
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
}

.history-video-item a {
    display: block;
    color: #666;
    text-decoration: none;
}

.business {
    margin-top: 50px;
    height: 280px;
    background: url(../assets/business.jpg) no-repeat center center;
    background-size: cover;
    text-align: left;
}

.slogn {
    margin-top: 60px;
    display: inline-block;
    font-size: 42px;
    padding: 20px 40px;
    color: #fff;
    background-color: #e2881b;
}

.little-sg {
    color: #fff;
    margin-top: 20px;
}

.index-cell {
    padding: 30px;
}

.index-item-title {
    display: inline-block;
    color: #fff;
    background-color: #e2881b;
    font-size: 28px;
    padding: 10px 20px;
}

.index-item-content {
    text-indent: 2em;
    line-height: 2;
    margin-top: 20px;
}

.table-wrap {
    height: 280px;
    padding: 30px 0;
}

.table-head {
    display: flex;
    background-color: #f5f7fa;
}

.table-head .table-head-item {
    flex: 1;
    height: 100px;
    line-height: 100px;
    text-align: center;
    outline: 1px solid #ebeef5;
}

.table-head .empty-item {
    width: 150px;
}

.table-body-row {
    display: flex;
}

.table-body-row .table-body-item {
    flex: 1;
    height: 100px;
    line-height: 100px;
    text-align: center;
    outline: 1px solid #ebeef5;
}

.table-body-row .item-index {
    width: 100px;
    height: 100px;
    line-height: 1.5;
    text-align: center;
    position: relative;
    display: table-cell;
}

.table-body-row .course-item-name {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1;
}

.chat-box {
    height: 410px;
    padding: 5px 0;
    border: 1px solid #eaeaea;
}

.chat-scrollbar {
    height: 100%;
}

.c-list {
    width: 100%;
    padding: 0;
    font-size: 14px;
    box-sizing: border-box;
    list-style: none;
    margin: 0;
}

.c-list li {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 5px;
    line-height: 20px;
    color: #555;
}

.text-cont {
    margin: 0;
    padding-left: 0;
    line-height: 22px;
}

.nick {
    color: #2b94ff;
    padding-left: 2px;
    padding-right: 2px;
}

.chat-feat {
    overflow: hidden;
    zoom: 1;
    margin-top: 10px;
}

.chat-feat .cs-textarea {
    width: calc(100% - 43px);
    box-sizing: border-box;
    height: 49px;
    padding: 5px;
    border: 1px solid #ff921a;
    border-right: none;
    border-radius: 4px 0 0 4px;
    line-height: 20px;
    float: left;
    overflow: hidden;
}

.cs-textarea textarea {
    height: 60px;
    outline: none;
    border: none;
    overflow: hidden;
    color: #a8a8a8;
    resize: none;
}

.chat-feat .b-btn {
    display: block;
    width: 43px;
    height: 49px;
    line-height: 49px;
    border-radius: 0 4px 4px 0;
    background: #f70;
    color: #fff;
    font-size: 14px;
    float: left;
    text-align: center;
    cursor: pointer;
}

.login-inside {
    height: 47px;
    line-height: 47px;
    color: #919191;
    background: #fff;
    border: 1px solid #ff921a;
    border-radius: 3px;
    text-align: center;
    box-sizing: border-box;
    font-size: 12px;
    margin: 10px 0 0;
}

.is-log {
    cursor: pointer;
    text-decoration: underline;
    color: #ff921a;
}


.verification-input {
    width: 140px;
    float: left;
}

.get-code {
    width: 100px;
    float: right;
    font-size: 14px;
    padding: 12px 5px;
}


.priod-title {
    font-size: 24px;
    display: inline-block;
    padding-bottom: 5px;
    color: #f39200;
    border-bottom: 5px solid #cfd3d8;
    margin-top: 30px;
}

.video-time{
	font-size: 14px;
}
.video-title {
    font-size: 14px;
    font-weight: bold;
    white-space: pre-wrap;
    word-break: break-all;
    display: inline-block;
}

.priod-videos {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: #888;
    font-size: 14px;
    transition: all .3s ease-in-out;
    /*border: 1px solid #e8e5e5;*/
    background-color: #f9f9f9;
    border-radius: 2px;
    overflow: hidden;
    zoom: 1;
}

.priod-videos:hover {
    color: #c32525;
    box-shadow: 0 3px 18px 0 rgba(0, 0, 0, .3);
}

.priod-text {
    width: calc(100% - 110px);
    margin: 5px;
    float: left;
}

.more-proid {
    text-align: right;
    line-height: 24px;
}

.more-proid-btn {
    display: inline-block;
    text-decoration: none;
    margin-top: 10px;
    font-size: 14px;
    transition: all .3s ease-in-out;
    color: #888;
    border-bottom: 2px solid transparent;
}

.more-proid-btn:hover {
    color: #3a8ee6;
    border-bottom-color: #da1818;
}

.p-shadow {
    width: 100%;
    box-shadow: 10px 10px #e2881b;
}

.performance-ul {
    padding: 0;
    margin: 0;
    overflow: hidden;
    list-style: none;
}

.ul-flex {
    /*display: flex;*/
    width: 50%;
    float: left;
    line-height: 40px;
    height: 40px;
    cursor: pointer;
}

.li-flex-1 {
    padding: 0 15px;
}

.ul-flex:hover {
    background-color: #eee;
}

.thumb {
    width: 100px;
    height: 100%;
    background-color: rgba(0, 0, 0, .1);
    float: left;
}

.thumb img {
    width: 100%;
    height: 100%;
}

.big-img{
	width: 100%;
}
.no-data{
    width: 100%;
    text-align: center;
    line-height: 40px;
    height: 40px;
    padding: 40px 0;
}

.top-scorll{
    margin: 20px 0;
}
.top-text{
    text-align: center;
    font-size: 40px;
    color: #ff0000;
    font-weight: bold;
    text-shadow: 5px 3px 5px rgba(0, 0, 0, .3);
}

</style>
